<template>
    <van-popup v-model="showModel" round position="bottom" style="height: 500px" :close-on-click-overlay="false" @click-overlay="showDialog = true">
        <div class="priceBox">￥<span>{{money}}</span></div>
        <div class="yeBox" v-if="showRemainingSum">
            <div>
                <van-icon name="gold-coin" />
                账号余额
            </div>
            <div>{{remainingSum}}</div>
        </div>
        <!-- 密码输入框 -->
        <div class="titBox">请输入支付密码</div>
        <van-password-input :value="password" :focused="true" />
        <!-- 键盘 -->
        <van-number-keyboard v-model="password" :show="true" />
        <!-- 弹窗 -->
        <van-dialog v-model="showDialog" showCancelButton cancelButtonText='放弃' confirmButtonText="继续付款" confirmButtonColor="#1e93ff" @cancel="cancelDialog">
            是否放弃本次付款
        </van-dialog>
    </van-popup>
</template>

<script>
    import { encrypt } from "@/plugins/utils/jsencrypt";
    import { queryPersonPayment,queryBalance, checkPersonPayment } from '@/api/platframe/mainFrame/pay';
    export default {
        props: {
            money: { // 价格
                type: String,
                default: '',
            },
            // 是否显示余额
            showRemainingSum: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                userId: '',
                showModel: false,
                remainingSum: '', // 余额
                password: '',
                showDialog: false,
            };
        },
        mounted () {
            // this.userId = "53E33C3A2D0B4E98917487B92E2586D6";
            this.userId = sessionStorage.getItem("userid");
        },
        watch: {
            showModel: {
                handler (val) {
                    if (val) {
                        this.password = '';
                        this.queryBalanceData();
                    }
                }
            },
            password: {
                handler (val) {
                    if (val.length === 6) {
                        this.isBlur();
                    }
                },
            },
        },
        methods: {
            // 校验是否是否设置支付密码，是否免密
            isProof() {
                queryPersonPayment({ "staffId":this.userId }).then((res) => {
                    if (res.code === 1000) {
                        if (res.data.count === 0) {// 没有设置过密码
                            this.$Dialog.confirm({
                                title: '没有设置支付密码，请设置支付密码！',
                            }).then(() => {
                                this.$router.push({ path: "/pay/cipher" });
                            });
                        } else if (res.data.payment_free === "1") {// 免密支付
                            this.$emit('paySuccess');
                        } else { // 密码校验
                            this.showModel = true;
                        }
                    }
                })
            },
            // 用户id和密码校验
            async isBlur () {
                if (!Boolean(this.password)) return;
                //加密
                let str = encrypt(this.password);
                let obj = {
                    paymentPassword: str,
                    staffId: this.userId
                };
                let res = await checkPersonPayment(obj);
                if (res.code === 1000) {
                    if (res.data === 1) { // 输入密码正确
                        this.showModel = false;
                        this.$emit('paySuccess');
                    } else {
                        this.$Notify({ type: 'danger', message: '密码输入错误！' });
                        this.password = '';
                    }
                }
            },
            // 放弃支付
            cancelDialog () {
                this.showModel = false;
                this.$emit('payCancel');
            },
            // 余额查询
            queryBalanceData () {
                this.remainingSum = '';
                if (this.showRemainingSum) {
                    queryBalance({ 'staffId': this.userId }).then(res => {
                        if (res.code === 1000) {
                            this.remainingSum = res.data
                        }
                    });
                }
            }
        }
    };
</script>

<style scoped lang="less">
    .priceBox {
        margin-top: 36px;
        margin-bottom: 10px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        span {
            font-size: 26px;
        }
    }
    .yeBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        margin: 5px;
        div:nth-child(1) {
            .van-icon {
                color: #1e93ff;
            }
        }
    }
    .titBox {
        text-align: center;
        color: #ccc;
        margin: 20px 16px 10px;
    }
    ::v-deep .van-dialog__content {
        height: 80px !important;
        line-height: 80px;
        font-weight: 500;
        text-align: center;
    }
</style>